<template>
    <common-header :title="title" isHome></common-header>
    <div class="content">
        <van-swipe 
            lazy-render
            class="my-swipe" 
            :loop="false" 
            @change="onChangeSwipe"
            :initial-swipe="initialSwipe"
            :show-indicators="false">
            <van-swipe-item v-for="item in componentData" :key="item.name">
                <common-page>
                    <component :is="item.comp" />
                </common-page>
            </van-swipe-item>
        </van-swipe>
    </div>
    <van-tabbar v-model="active" @change="switchComp">
        <van-tabbar-item 
            :icon="item.icon" 
            :name="item.name" 
            @click="onClickTabbar(index)" 
            v-for="(item,index) in componentData" 
            :key="item.name">
            {{item.title}}
        </van-tabbar-item>
    </van-tabbar>
    <van-watermark 
        content="dwdengwan" 
        opacity="0.2" 
        :height="100" 
        full-page 
        text-color="#f00"/>
</template>
<script setup lang="ts">
import { defineComponent, ref, shallowRef } from 'vue';

import Friends from '@/components/Friends/index.vue';
import Me from '@/components/Me/index.vue';
import Search from '@/components/Search/index.vue';
import Wechat from '@/components/Wechat/index.vue';
import CommonHeader from '@/components/common/header.vue';
import CommonPage from '@/components/common/page.vue';

const active = ref('chat');
const title = ref('微信');
const compId = shallowRef(Wechat)
const initialSwipe = ref(0);
 
const componentData = [
    {
        name: 'chat',
        comp: Wechat,
        title: '微信',
        icon:"chat-o" 
    },
    {
        name: 'search',
        comp: Search,
        title: '通讯录',
        icon:"search" 
    },
    {
        name: 'friends',
        comp: Friends,
        title: '发现',
        icon:"friends-o" 
    },
    {
        name: 'me',
        comp: Me,
        title: '我',
        icon:"setting-o" 
    }
]
 
type Comp = {
    name:string,
    comp:ReturnType<typeof defineComponent>
}
const switchComp = (comp:string|Comp)=>{
    const info:any = componentData.find(item => item.name === comp)
    compId.value = info.comp 
    title.value = info.title
}
const onChangeSwipe = (index:number)=>{
    active.value = componentData[index].name
    switchComp(componentData[index].name)
}
const onClickTabbar = (index:number)=>{
    initialSwipe.value = index
    active.value = componentData[index].name
    switchComp(componentData[index].name)
}
</script>
<style scoped>
.content{
    height: calc(100vh - 6em);
    background-color: #f5f5f5;
}
.my-swipe{
    width: 100%;
    height: 100%;
}
</style>